<template>
	<view class="content">
		<view class="header">
			<view class="title_top">
				大王币余额
			</view>
			<view class="title_mon_txt">
				<text style="margin-right: 20rpx"></text>{{ walletData.integral }}
			</view>
			<view class="blance"> 开盒或购物时，1 大王币可抵扣 1 元现金 </view>
		</view>
		<view class="cent_wrap">
			<view class="section">
				<view class="title">
					<text>充值金额</text>
					<text>充值的大王币不可提现退款</text>
				</view>
			</view>
			<view class="types flex-j-s flex-a-c">
				<view class="typea" :class="rid == item.rid ? 'active' : ''" @click="toSelect(item.rid, item.price)"
					v-for="(item, index) in balanceList" :key="index">
					<view class="top">
						<view class="num_text">{{ item.num }}<text class="paidou">大王币</text></view>
					</view>
					<view class="bot size28 of-t-w" style="max-width: 200rpx">售价{{ item.price }}元</view>
				</view>
			</view>
			<view class="chongzhi">
				<text>￥</text>
				<input type="number" placeholder="请输入充值金额" v-model="money" @input="numbeript" maxlength="5"
					placeholder-style="font-size:28rpx;color:#ffffff;" style="color:#fff;" />
			</view>
		</view>


		<view class="order-mation">
			<view class="om-top"><text>支付方式</text></view>
			<view class="order-con">
				<view @click="zfClick(1)" v-if="walletData.weixin_pay_status == 'on'">
					<view>
						<image src="https://pd.pdaxiang.com/upload/static/newImg/weixin.png"></image>
						<text>微信</text>
					</view>
					<view class="">
						<image src="https://mh.qingfentool.vip/upload/image/20230517/4ff94c82cf5699b4da8ab39de664ae27.png" v-if="zfck == 1"
							mode="aspectFill"></image>
						<image src="https://mh.qingfentool.vip/upload/image/20230517/d0ccebaa6513e00b4e0d54fa25c23695.png" v-else></image>
					</view>
				</view>
				<!-- #ifndef  MP-WEIXIN -->
				<view @click="zfClick(2)" v-if="walletData.alipay_status == 'on'">
					<view>
						<image src="https://pd.pdaxiang.com/upload/static/newImg/zhifubao.png"></image>
						<text>支付宝</text>
					</view>
					<view class="">
						<image src="https://mh.qingfentool.vip/upload/image/20230517/4ff94c82cf5699b4da8ab39de664ae27.png" v-if="zfck == 2"></image>
						<image src="https://mh.qingfentool.vip/upload/image/20230517/d0ccebaa6513e00b4e0d54fa25c23695.png" v-else></image>
					</view>
				</view>
				<!-- #endif -->
			</view>
		</view>
		<!-- #ifdef MP-WEIXIN -->
		<!-- <view class="order-mation">
				</view> -->
		<!-- #endif -->
		<view class="shuoming">
			<view class="" v-html="content"> </view>
		</view>
		<view class="footer">
			<view class="select" @click="goCheck">
				<image src="https://mh.qingfentool.vip/upload/image/20230517/d0ccebaa6513e00b4e0d54fa25c23695.png" v-if="checkStatus == true">
				</image>
				<image src="https://mh.qingfentool.vip/upload/image/20230517/4ff94c82cf5699b4da8ab39de664ae27.png" v-else></image>
				<view>本人已满18周岁具备完全行为能力，充值即代表已阅读并同意<text @click.stop="goUrl('/userPage/user/agreement?type=2&id=2')"
						style="color: #fff">《用户协议》</text></view>
			</view>
			<view class="left">
				<view class="price">
					<text class="price_top">充值金额：</text>
					<text class="zongjia" v-if="zongjia">￥{{ zongjia }}</text>
				</view>
				<view class="right flexs" @click="submit"> 立即支付 </view>
			</view>
		</view>
		<!-- <u-popup mode="center" v-model="urlpayStatus">
			<view class="webcenter">
				结算
			</view>
		</u-popup> -->
		<!-- <u-popup mode="center" v-model="chongzhitanchuang">
			<view class="popup_cz">
				<view class="specification_box">
					
				</view>
				<view class="chongzhigb" @tap="chongzhigbBtn">
						<image src="https://mh.qingfentool.vip/upload/image/20230323/99c827d527a28f1406071b44e75938a9.png"
						mode="scaleToFill" />
					</view>
			</view>
		</u-popup> -->

	</view>
</template>

<script>
import wxPopup from '@/components/wx_pay/wx_pay_popup.vue'
export default {
	components: {
		wxPopup
	},
	data() {
		return {
			payurl: '',
			order_id: '',
			getjieguodingshi: null,
			urlpayStatus: false,
			// chongzhitanchuang: false,
			checkStatus: true,
			blance: {},
			goodsList: [],
			page: 1,
			balanceList: [],
			rid: '',
			walletData: {
				integral: ''
			}, //余额
			zfck: '', //1微信2支付宝
			zongjia: 0,
			money: '',
			content: '',
			heji_num: '', //合计数量
			iconurl: this.$configs.urls,
			code: '',
			orderInfo: {},
			fromPage: null, //判断是哪个盲盒类型
			tabIndex: null, //盒子发数
			box_id: null, //盒子id
			codeUrl: '',//微信三方付款链接
			twonum: '',
		}
	},
	onLoad(e) {
		if (e.fromPage || e.tabIndex) {
			this.tabIndex = e.tabIndex
			this.fromPage = e.fromPage
			this.box_id = e.box_id
		}

		if (e.data) {
			this.orderInfo = JSON.parse(e.data)
		}
		this.heji_num = Number(e.heji_num).toFixed(2)
	},
	onShow() {
		// #ifdef MP-WEIXIN
		this.getcode()
		// #endif
		this.getlist()
		this.getwallet() //钱包
		this.wenzhanglist()
		// this.cztcPop()//充值弹窗
	},
	onNavigationBarButtonTap(e) {
		uni.navigateTo({
			url: '/userPage/user/rechangemingxi'
		})
	},
	methods: {
		// 充值弹窗
		// cztcPop() {
		// 	if (uni.getStorageSync('czsm') == 1) {
		// 		this.chongzhitanchuang = true
		// 		uni.setStorageSync('czsm', 2)
		// 	}

		// },
		// chongzhigbBtn(){
		// 	this.chongzhitanchuang = false
		// },
		getjieguo() {
			let data = {
				order_id: this.order_id
			}
			this.$Request.get(this.$api.index.payResult, data).then(res => {
				if (res.data.is_pay == 1) {
					clearInterval(this.getjieguodingshi)
					this.urlpayStatus = false
					setTimeout(() => {
						this.getlist()
						this.getwallet() //钱包
					}, 800)
				}
			})
		},
		goCheck() {
			this.checkStatus = !this.checkStatus
		},
		goUrl(url) {
			uni.navigateTo({
				url: url
			})
		},
		wenzhanglist() {
			let data = {
				id: 5
			}
			this.$Request.get(this.$api.index.wenzhang, data).then(res => {
				this.content = res.data.content
			})
		},
		numbeript(e) {
			if (e.detail.value >= 10000) {
				this.zongjia = 10000
				this.money = 10000
				return
			}
			this.zongjia = this.money
			this.rid = -1
			if (this.zongjia == '') {
				this.zongjia = 0
			}
		},
		getcode() {
			let that = this
			uni.login({
				provider: 'weixin',
				success: function (res) {
					that.code = res.code
				}
			})
		},
		submit() {
			if (this.checkStatus == true) {
				uni.showToast({
					title: '请先勾选阅读并同意充值协议',
					icon: 'none'
				})
				return
			}
			this.$nextTick(() => {
				this.getInfo()
				// #ifdef MP-WEIXIN
				this.getcode()
				// #endif
			})
		},
		getInfo() {
			// #ifdef APP-PLUS
			var data = {
				num: Number(this.zongjia),
				pay_type: this.zfck
			}
			// #endif
			// #ifdef MP-WEIXIN
			var data = {
				js_code: this.code,
				num: Number(this.zongjia),
				pay_type: this.zfck,
				is_xwechat: 1,
				wechat_type: uni.getStorageSync('wechat_type'),
			}
			// #endif
			uni.showLoading({
				title: '正在加载中....'
			})
			this.$Request.post(this.$api.user.submitOrder, data).then(res => {
				uni.hideLoading()
				this.payurl = res.data.pay_data
				this.order_id = res.data.order_id
				this.Payment(res.data.pay_data)
			})
		},
		Payment(pay_data) {
			let provider = ''
			if (this.zfck == 1) {
				provider = 'wxpay'
			} else {
				provider = 'alipay'
			}
			//调用支付
			let that = this
			uni.requestPayment({
				provider: provider,
				// #ifdef APP-PLUS
				orderInfo: pay_data,
				// #endif
				// #ifdef MP-WEIXIN
				timeStamp: pay_data.timeStamp,
				nonceStr: pay_data.nonceStr,
				signType: 'MD5',
				package: pay_data.package,
				paySign: pay_data.paySign,
				// #endif
				success() {
					uni.showToast({
						title: '充值成功',
						icon: 'none'
					})
					// setTimeout(()=>{
					// 	// that.tijiaoOrder()
					// },1000)
				},
				fail(res) {
					uni.showToast({
						title: '充值失败',
						icon: 'none'
					})
				}
			})
		},
		// tijiaoOrder() {
		// 	uni.navigateTo({
		// 	url: '/rollPages/index/BaishoIndex?&box_id=' + this.box_id
		// 	})
		// },
		subpayData(order_id) {
			let data = {
				order_id: order_id,
				pay_type: 3
			}
			this.$Request.get(this.$api.mall.payData, data).then(res => {
				//已支付
				uni.showToast({
					title: res.msg,
					icon: 'none'
				})
				setTimeout(() => {
					uni.switchTab({
						url: '/pages/index/cabinetBox'
					})
				}, 800)
			})
		},
		getlist() {
			this.$Request.get(this.$api.user.setmeal).then(res => {
				this.balanceList = res.data.list
				this.rid = this.balanceList[0].rid
				this.zongjia = this.balanceList[0].price
				if (this.heji_num) {
					this.rid = 0
					this.zongjia = this.heji_num
					this.balanceList.unshift({
						num: this.heji_num,
						price: this.heji_num,
						rid: 0
					})
				}
				for (let i = 0; i < this.balanceList.length; i++) {
					if (isNaN(this.balanceList[0].num && this.balanceList[0].price)) {
						this.balanceList[0].num = 8.6;
						this.balanceList[0].price = 8.6;
						this.zongjia = 8.6
					}
				}
			})
		},
		zfClick(infock) {
			this.zfck = infock
		},
		getwallet() {
			this.$Request.get(this.$api.user.wallet).then(res => {
				////console.log('walletData', res.data)
				this.walletData = res.data
				if (res.data.weixin_pay_status == 'on') {
					this.zfck = 1
					return
				}
				if (res.data.alipay_status == 'on') {
					this.zfck = 2
					return
				}
			})
		},
		toSelect(rid, price) {
			this.rid = rid
			this.twonum = Math.random() * ((0.5 - 0.99) + 1);
			this.zongjia = (price - this.twonum).toFixed(2)
		},
		goDetail(e) {
			uni.navigateTo({
				url: '/mallPage/mall/goodsdetail?goods_id=' + e.goods_id
			})
		}
	}
}
</script>

<style lang="scss" scoped>
.shuoming {
	width: 662rpx;
	padding: 0 20rpx;
	font-size: 24rpx;
	font-weight: 500;
	color: #fff;
	line-height: 36rpx;
	overflow: hidden;
	margin: auto;
}

.cent_wrap {
	width: 690rpx;
	height: 520rpx;
	box-shadow: 0rpx 10rpx 16rpx 0rpx rgba(131, 126, 127, 0.08);
	border-radius: 20rpx;
	margin: 0 auto;
}

.footer {
	width: 750rpx;
	height: 219rpx;
	background: #282828;
	box-shadow: 0px 3rpx 10rpx rgba(0, 0, 0, 0.16);
	position: fixed;
	bottom: 0;
	padding: 30rpx 30rpx 0;
	box-sizing: border-box;

	.select {
		flex-shrink: 0;
		display: flex;
		align-items: center;
		margin-top: 10rpx;

		view {
			width: 638rpx;
			font-size: 24rpx;
			font-weight: 500;
			color: #fff;
			padding-left: 17rpx;
		}

		image {
			width: 38rpx;
			height: 38rpx;
		}
	}

	.left {
		flex: 1;
		display: flex;
		align-items: center;
		justify-content: space-between;

		.price {
			padding-bottom: 4rpx;
			text-align: left;

			.price_top {
				font-size: 32rpx;
				font-weight: bold;
				color: #fff;
			}

			.zongjia {
				font-size: 50rpx;
				font-weight: 549;
				color: #FF9900;
			}
		}
	}

	.right {
		width: 260rpx;
		height: 96rpx;
		background: rgba(0, 0, 0, 0.1);
		border: 1rpx solid #FF9F00;
		border-radius: 48rpx;
		font-size: 32rpx;
		font-weight: bold;
		color: white;
	}
}

.order-mation {
	width: 700rpx;
	border-radius: 20rpx;
	margin: auto;
	margin-bottom: 20rpx;
	padding: 40rpx 30rpx;
	background: rgba(255, 231, 192, 0.1);
	border-radius: 10rpx 10rpx 10rpx 10rpx;
	opacity: 1;
	border: 2rpx solid #FED187;

	.om-top {
		display: flex;
		justify-content: space-between;
		margin-bottom: 20rpx;

		text:nth-of-type(1) {
			font-size: 36rpx;
			font-weight: bold;
			color: #fff;
			line-height: 48rpx;
		}

		text:nth-of-type(2) {
			font-size: 30rpx;
			color: #fff;
		}
	}

	.order-con {
		display: flex;
		flex-direction: column;
		justify-content: center;
		color: #fff;

		view {
			display: flex;
			justify-content: space-between;
			align-items: center;

			view {
				margin-top: 28rpx;

				text {
					margin-left: 18rpx;
				}
			}
		}

		image {
			width: 49rpx;
			height: 49rpx;
		}
	}
}

.chongzhi {
	width: 690rpx;
	display: flex;
	align-items: center;
	margin: 0 auto;
	margin-bottom: 20rpx;
	background: rgba(0, 0, 0, 0.2);
	border-radius: 6rpx 6rpx 6rpx 6rpx;
	opacity: 1;
	border: 1rpx solid #FED187 !important;
	z-index: 99999999999999999999999999999999;

	text {
		font-size: 50rpx;
		font-weight: bold;
		color: #FF9900;
	}

	input {
		width: 520rpx;
		height: #FF9900;
		margin-left: 20rpx;
		padding-left: 20rpx;
		font-size: 50rpx;
	}
}

.types {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	margin-top: 40rpx;
}

.typea {
	width: 192rpx;
	height: 131rpx;
	border: 2rpx solid #FED187 !important;
	border-radius: 20rpx;
	background-size: 100% 100%;
	margin-bottom: 30rpx;
	padding: 10rpx;
	text-align: center;
	z-index:9999999999;

	image {
		width: 60rpx;
		height: 60rpx;
	}

	.top {
		text-align: center;
		margin-top: 10rpx;

		.num_text {
			font-size: 26rpx;
			color: #fff;

			.paidou {
				font-size: 26rpx !important;
			}
		}
	}

	.bot {
		margin-top: 16rpx;
		font-size: 24rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #fff;
		text-align: center;
	}
}

.active {
	background: rgba(255, 178, 0, 0.4);
	border-radius: 20rpx;
	border: 0;
	border: 1rpx solid #FED187;

	.num_text {
		color: #FF9900 !important;
	}

	.size34 {
		color: #FF9900 !important;
	}

	.bot {
		color: #FF9900 !important;
	}
}

.content {
	width: 100vw;
	min-height: 100vh;
	background: #262626;
	padding-bottom: 210rpx;
	overflow: hidden;

	.goodlist {
		margin-top: 20rpx;
	}

	.header {
		display: flex;
		flex-direction: column;
		width: 750rpx;
		height: 272rpx;
		// background: linear-gradient(180deg, #FF9900 22%, #FFCB7D 100%);
		background-image: url('https://mh.qingfentool.vip/upload/image/20230522/2d686dc53c5e5bae28d93f1ca285296d.png');
		background-size: 100% 100%;
		border-radius: 18rpx 18rpx 18rpx 18rpx;
		padding-top: 30rpx;
		padding-left: 44rpx;
		box-sizing: border-box;
		margin-bottom: 30rpx;
		position: relative;

		.title_top {
			margin-top: 20rpx;
			font-size: 40rpx;
			color: #ffffff;
			line-height: 60rpx;
			margin-bottom: 20rpx;
			padding-left: 22rpx;
		}

		.title_mon_txt {
			height: 70rpx;
			font-size: 48rpx;
			font-weight: 700;
			color: #FFFFFF;
			line-height: 70rpx;
		}

		.blance {
			font-size: 24rpx;
			font-weight: 500;
			color: #fff;
			position: absolute;
			bottom: 32rpx;
		}
	}

	.section {
		.title {
			display: flex;
			align-items: center;

			text {
				font-size: 44rpx;
				font-family: YouSheBiaoTiHei-Bold, YouSheBiaoTiHei;
				font-weight: 400;
				color: #FFAE2A;
			}

			text:nth-child(2) {
				justify-content: flex-end;
				margin-left: auto;
				font-size: 24rpx;
				color: #fff;
			}
		}
	}

}

// /deep/.u-mode-center-box {
// 	background-color: transparent !important;
// }

// .popup_cz {
// 	width: 580rpx;
// 	height: 1000rpx;
// 	position: relative;

// 	.specification_box {
// 		position: absolute;
// 		bottom: 0;
// 		width: 580rpx;
// 		min-height: 932rpx;
// 		border-radius: 20rpx;
// 		background-image: url('https://mh.qingfentool.vip/upload/image/20230327/a39e8d3b8abf3cbbd44138aacea22b95.png');
// 		background-size: 100% 100%;
// 	}
// 	.chongzhigb {
// 				position: absolute;
// 				right: 0;
// 				width: 52rpx;
// 				height: 52rpx;

// 				image {
// 					width: 100%;
// 					height: 100%;
// 				}
// 			}
// }
</style>
